<template>
  <view class="student-management-container">

    <!-- 搜索栏 -->
    <view class="search-bar-container">
      <uni-search-bar 
        v-model="queryParams.studentName" 
        placeholder="请输入学生姓名" 
        @input="handleQuery"
        :radius="12"
        cancelButton="none"
      />
    </view>
    <!-- 学员列表 -->
    <uni-list class="student-list">
      <view 
        class="list-item-wrapper" 
        v-for="item in studentList" 
        :key="item.id"
        @click="handleItemClick(item)"
      >
        <uni-list-item 
          :title="item.name" 
          :note="`${item.gender} 入学时间${formatDate(item.createTime)}`" 
          ellipsis="1"
        >
          <template v-slot:footer>
            <view class="item-status">
              <uni-tag 
                :text="item.effective === '1' ? '在读' : '过期'"
                :type="item.effective === '1' ? 'success' : 'warning'"
                size="small"
              ></uni-tag>
            </view>
          </template>
        </uni-list-item>
      </view>
      
      <uni-empty 
        v-if="studentList.length === 0" 
        text="暂无学员数据" 
        mode="list"
      />
    </uni-list>
      
    <!-- 分页组件 -->
    <uni-pagination 
      v-if="total > 0" 
      :total="total" 
      :current="queryParams.pageNum" 
      :pageSize="pageSize" 
      @change="handlePageChange"
      show-icon
      size="small"
      prev-text="上一页"
      next-text="下一页"
      style="margin: 20px 0; text-align: center;"
    />

  </view>
</template>

<script>
  import request from '@/utils/request'

  export default {
    data() {
      return {
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          studentName: '',
          classId: '',
          status: ''
        },
        // 班级选项
        classOptions: [],
        // 学员列表
        studentList: [],
        // 分页相关
        total: 0,
        pageSize: 10,
        // 遮罩层
        loading: false
      }
    },
    onLoad() {
      this.getList()
    },
    onShow() {
      // 页面显示时刷新列表数据
      this.getList()
    },
    methods: {  
      // 查询列表
      getList() {
        this.loading = true
        // 设置分页参数
        this.queryParams.pageSize = this.pageSize
        request({
          url: '/ysg/student/list',
          params: this.queryParams,
          method: 'GET'
        }).then(res => {
          if (res.code === 200) {
            // 更新列表数据
            this.studentList = res.rows || []
            // 更新总条数
            this.total = res.total || 0
          }
          this.loading = false
        }).catch(error => {
          console.warn('获取学员列表失败', error)
          this.loading = false
          // 使用模拟数据
          this.studentList = [
            {
              id: 1,
              name: '张三',
              gender: '男',
              className: '绘画初级课程',
              phone: '13800138001',
              status: 'active',
              effective: '1',
              createTime: '2025-12-02 13:05:30'
            },
            {
              id: 2,
              name: '李四',
              gender: '女',
              className: '绘画初级课程',
              phone: '13800138002',
              status: 'active',
              effective: '1',
              createTime: '2025-12-02 13:06:15'
            },
            {
              id: 3,
              name: '王五',
              gender: '男',
              className: '绘画高级课程',
              phone: '13800138003',
              status: 'graduated',
              effective: '0',
              createTime: '2025-11-15 09:30:00'
            }
          ]
          // 模拟总条数
          this.total = this.studentList.length
        })
      },
      
      // 搜索
      handleQuery() {
        this.queryParams.pageNum = 1
        this.getList()
      },
      
      // 分页变化事件
      handlePageChange(e) {
        this.queryParams.pageNum = e.current
        this.getList()
      },
      
      // 日期格式化方法，只显示年月日
      formatDate(dateStr) {
        if (!dateStr) return ''
        // 截取年月日部分，假设日期格式为yyyy-MM-dd HH:mm:ss
        return dateStr.substring(0, 10)
      },
      // 点击列表项
      handleItemClick(item) {
        // 跳转到学员详情页面
        this.$tab.navigateTo(
           `/pages/work/student-detail?id=${item.id}&name=${item.name}&className=${item.className}&phone=${item.phone}&status=${item.status}`
        )
      }
    }
  }
</script>

<style scoped>
  .student-management-container {
    background-color: #f5f5f5;
    min-height: 100vh;
    padding: 0;
    margin: 0;
  }

  /* 搜索栏容器 */
  .search-bar-container {
    padding: 3px 8px;
    background-color: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    margin-bottom: 0;
  }

  /* 确保搜索栏高度一致 */
  .uni-search-bar {
    height: 38px;
  }

  .uni-search-bar__input {
    height: 38px;
    line-height: 38px;
  }

  /* 过滤选择器容器 */
  .filter-picker-container {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 8px;
    background-color: white;
    border-bottom: 1px solid #e4e7ed;
    margin-bottom: 0;
  }

  .filter-label {
    font-size: 13px;
    color: #666;
    font-weight: 500;
    flex-shrink: 0;
  }

  /* uni-data-picker 样式调整 */
  :deep(.uni-data-picker) {
    flex: 1;
  }

  :deep(.uni-data-picker__selector) {
    font-size: 13px;
    color: #333;
    padding: 6px 10px;
    background-color: #f5f7fa;
    border: 1px solid #e4e7ed;
    border-radius: 6px;
    height: 32px;
    line-height: 16px;
    display: flex;
    align-items: center;
  }

  :deep(.uni-data-picker__placeholder) {
    color: #999;
  }

  /* 列表区域 */
  .student-list {
    background-color: white;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    margin: 0;
  }

  .list-header {
    background-color: #f5f7fa;
  }

  .item-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
  }

  /* 列表项包裹器样式 */
  .list-item-wrapper {
    display: block;
    width: 100%;
    cursor: pointer;
    overflow: hidden;
  }

  .list-item-wrapper:active {
    background-color: #f5f7fa;
  }
</style>